<script setup lang="ts">
import { CSSProperties, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import Header from './components/Header.vue';
import { Article } from '@/api/community/type';
import { getCommunityTagList } from '@/api/community';
import { Tag } from '@/api/system/tag/type';
import { useUserStore } from '@/store/user';
const communityId = ref('');
const article = ref({
    tagId: '',
    communityId: '',
    authorId: '',
    content: ''
} as Article)
const tagList = ref([] as Tag[]);
const styleList = ref([] as CSSProperties[]);
onMounted(() => {
    const route = useRoute();
    if (
        route.query.communityId != undefined && !Array.isArray(route.query.communityId)
    ) {
        communityId.value = route.query.communityId;
        article.value.communityId = communityId.value;
        const userStore = useUserStore();
        article.value.authorId = userStore.getId;
        getCommunityTagList(communityId.value).then((res) => {
            tagList.value = res.data;
            tagList.value.forEach(() => {
                styleList.value.push({});
            })
        })
    }
})
const select = (now: number) => {
    article.value.tagId = tagList.value[now].id;
    styleList.value.forEach((item, index) => {
        if (index === now) {
            item.backgroundColor = '#E7F0FC';
            item.color = '#3482FF';
            item.border = '1px solid #E7F0FC';
        } else {
            item.backgroundColor = '';
            item.color = '';
            item.border = '';
        }
    })
}
</script>

<template>
    <div class="container">
        <Header v-model="article"></Header>
        <div class="row">
            <p class="text">选择版区</p>
            <div class="item" :style="styleList[index]" v-for="(item, index) in tagList" @click="select(index)">
                <p class="text" :style="{color: styleList[index].color}">{{ item.name }}</p>
            </div>
        </div>
        <div class="content">
            <van-field class="input"
                v-model="article.content"
                autosize
                type="textarea"
                placeholder="请输入内容"
                show-word-limit
                maxlength="10000"
            />
        </div>
    </div>
</template>

<style lang="scss" scoped>
.content {
    margin: 3%;
    border-radius: 15px;
    height: 80%;
    display: flex;
    overflow-y: scroll;
    scrollbar-width: none; /* 针对 Firefox */
    -ms-overflow-style: none; /* 针对 IE/Edge */
}
.row {
    display: flex;
    margin: 3%;
    margin-bottom: 0;
    margin-top: 0;
    align-items: center;
    .text {
        color: rgba(56, 56, 56, 0.507);
    }
    .item {
        display: flex;
        margin-left: 3%;
        align-items: center;
        border: 1px solid rgba(39, 39, 39, 0.596);
        border-radius: 15px;
        height: 50%;
        padding-left: 7px;
        padding-right: 7px;
        .text {
            font-size: 14px;
            color: rgba(41, 43, 44, 0.705);
        }
}
}
</style>